<template>
	<view>
		<!-- <view :class="isOpenModal?'fixed':''"> -->
		<view>
			<view>
				<view class="cu-form-group">
					<view class="title">发料仓</view>
					<picker
						@change="
							e => {
								storeIndex = e.detail.value;
							}
						"
						:value="storeIndex"
						:range="storeChooseList"
						range-key="text"
					>
						<view class="picker">
							<text v-if="storeIndex > -1">{{ storeChooseList[storeIndex].wh_name }}</text>
							<!-- <text v-if="bill_type_idx > -1 && bill_types[bill_type_idx]">{{ bill_types[bill_type_idx].type_name }}</text> -->
							<text v-else style="color:#888">请选择发料仓</text>
						</view>
					</picker>
				</view>

				<view class="cu-form-group">
					<view class="title">工单</view>
					<input placeholder="请输入工单" v-model="wolist" name="input" @confirm="onConfirmBillWolist" />
					<button class="cu-btn bg-green shadow" :disabled="!wolist" @click="onConfirmBillWolist">解析</button>
				</view>
				<view class="cu-form-group ">
					<view class="title">料号</view>
					<input placeholder="请输入料号" v-model="part" name="input" @confirm="onConfirmBillWolist" />
				</view>
				<view class="cu-form-group">
					<view class="title">发料单</view>
					<input placeholder="" :readonly="true" v-model="bill_id" name="input" />
				</view>
			</view>
			<todo-input v-model="todoNum" @confirm="onConfirmTodo" :focus="todoFocus" @focusChange="onTodoFocusChange"></todo-input>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					物料列表
				</view>
			</view>
			<!-- todolist -->
			<todo-list-view  :top="660"  class="cu-list menu">
				<view v-for="(item, idx) in todoList" class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-formfill text-blue margin-right-xs"></text>
							<text>发料单:</text>
							{{ item.bill_id }}
						</view>
						<view class="text-gray text-sm">
							<text class="lg text-gray cuIcon-settingsfill"></text>
							<text>料号:</text>
							{{ item.part_id }}
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">
							<text class="text-gray">可发({{ item.remain_qty }})</text>
							<text class="text-gray">需求({{ item.plan_qty }})</text>
						</view>
						<view class="text-gray  text-xs">
							<text class="text-gray">本次({{ item.current_qty }})</text>
							<text class="text-gray">超发({{ item.over_qty }})</text>
						</view>
					</view>
				</view>
			</todo-list-view>
			<view class="cu-bar tabbar bg-white shadow foot foot-btn-group">
				<button class="cu-btn bg-orange" :disabled="btnDisabled.start" @tap="onStartPick">开始下架</button>
				<button class="cu-btn bg-white" :disabled="btnDisabled.cancel" @tap="onCancelPick">取消下架</button>
				<button class="cu-btn bg-white" :disabled="btnDisabled.end" @tap="onClosePickUp">下架完成</button>
				<button class="cu-btn bg-white" :disabled="btnDisabled.use" @tap="onUsePick">消耗警存</button>
			</view>
			<bill-prompt ref="refCancelPrompt" @confirm="onCancelConfirm" title="取消下架"></bill-prompt>

			<view class="cu-modal bottom-modal" :class="chooseCloseStoreModal.visible ? 'show' : ''">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar bg-white">
						<view class="action text-green"></view>
						<view class="action text-green" @tap="onChooseStoreModalOk">确定</view>
					</view>
					<view class="grid col-12 " style="height:60vh; min-height:300rpx">
						<scroll-view style="height:60vh;" scroll-y="true">
							<radio-group @change="e => (chooseCloseStoreModal.storeId = e.detail.value)">
								<view style="border-top:1px solid #ccc"></view>
								<label class="cu-form-group" v-for="(item, idx) in chooseCloseStoreModal.storeList" :key="idx">
									<view class="title">
										<text>{{ item.wh_name }}</text>
									</view>
									<radio name="orderNum" :value="item.wh_id"></radio>
								</label>
							</radio-group>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="chooseUseStoreModal.visible ? 'show' : ''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-green" @tap="onChooseUseStoreModalOk">确定</view>
				</view>
				<view class="grid col-12 " style="height:60vh; min-height:300rpx">
					<scroll-view style="height:60vh;" scroll-y="true">
						<radio-group @change="e => (chooseUseStoreModal.storeId = e.detail.value)">
							<view style="border-top:1px solid #ccc"></view>
							<label class="cu-form-group" v-for="(item, idx) in chooseUseStoreModal.storeList" :key="idx">
								<view class="title">
									<text>{{ item.wh_name }}</text>
								</view>
								<radio name="orderNum" :value="item.wh_id"></radio>
							</label>
						</radio-group>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/serveices/wms-api.js';
import util from '@/serveices/util.js';
// import billInput from './bill-input.vue';
import billPrompt from './bill-prompt.vue';
import todoInput from './todo-input.vue';
import todoListView from './todo-list-view.vue';
export default {
	components: {
		// billInput
		billPrompt,
		todoInput,
		todoListView
	},
	data() {
		return {
			// 工单
			wolist: '',
			todoList: [],
			//发料单
			bill_id: '',
			todoNum: '',
			todoFocus:true,
			part: '',
			storeChooseList: [],
			storeIndex: -1,
			chooseCloseStoreModal: {
				visible: false,
				storeList: [],
				storeId: ''
			},
			// todo
			chooseUseStoreModal: {
				visible: false,
				storeList: [],
				storeId: ''
			}
		};
	},
	computed: {
		store() {
			if (this.storeIndex > -1) {
				return this.storeChooseList[this.storeIndex];
			} else {
				return null;
			}
		},
		btnDisabled() {
			let btns = {};
			if (this.todoList && this.todoList.length) {
				//
				btns = {
					start: false,
					// use: true,
					// cancel: false,
					// end: true
					//
					use: false,
					cancel: false,
					end: false
				};

				//若发料单文本框为空，可点击开始下架按钮
				// 若发料单文本框不为空  开始下架按钮不可用
				if (this.bill_id) btns.start = true;
			} else {
				btns = {
					start: true,
					cancel: false,
					use: true,
					end: true
				};
			}

			return btns;
		}
	},

	methods: {
		onTodoFocusChange(focus){
			this.todoFocus = focus
		},
		onConfirmBillWolist() {
			const store = this.storeIndex == -1 ? null : this.storeChooseList[this.storeIndex];
			if (!store) {
				// 提示
				uni.showToast({
					title: '需首先选择发料仓',
					icon: 'none',
					duration: 2000
				});
			} else {
				api.moissueinfo({
					woList: this.wolist,
					partList: this.part,
					issueWh: store.wh_id,
					issueBill: ''
				}).then(res => {
					if (!res.data.length) {
						uni.showToast({
							title: '工单不存在发料信息',
							icon: 'none'
						});
					} else {
						this.todoList = res.data;
					}
				});
			}
		},
		onStartPick() {
			//开始下架
			api.mopickup({
				opType: 'STARTMOPICK',
				billId: this.wolist,
				issueWh: this.store.wh_id,
				overWh: '',
				scanInfo: ''
			}).then(res => {
				//
				this.todoList = res.data;
				if (this.todoList.length) {
					// 使用bill_id填充发料单文本框，使用此数据集更新下方表格
					this.bill_id = this.todoList[0].bill_id;
				}
			});
		},
		// 输入框确认
		onConfirmTodo() {
			//若发料单文本框为空，扫描内容作为发料单处理
			let scanInfo = this.todoNum;
			if (!this.bill_id) {
				api.billmolist(scanInfo)
					.then(res => {
						this.wolist = res.data.wolist;
						let idx = this.storeChooseList.findIndex(x => x.issuewh == res.data.issueWh);
						this.storeIndex = idx;
						this.todoList = res.data.billdetail;
						if (this.todoList.length) {
							this.bill_id = this.todoList[0].bill_id;
						}
						util.playSuccess();
						this.todoNum = '';
					})
					.catch(err => {
						util.playFailed();
						this.todoNum = '';
					});
			} else {
				// 扫描内容作为物料信息处理
				api.mopickup({
					opType: 'PICKUP',
					billId: this.bill_id,
					issueWh: '',
					overWh: '',
					scanInfo: scanInfo
				})
					.then(res => {
						this.todoList = res.data;
						util.playSuccess();
						this.todoNum = '';
					})
					.catch(err => {
						util.playFailed();
						this.todoNum = '';
					});
			}
			this.todoNum = '';
		},

		onCancelPick() {
			this.$refs.refCancelPrompt.show();
		},
		onCancelConfirm(scanInfo) {
			api.mopickup({
				opType: 'CANCEL',
				billId: this.wolist,
				issueWh: '',
				overWh: '',
				scanInfo: scanInfo
			})
				.then(res => {
					//若数据集bill_id与工单发料发料单一致，使用此结果集更新下方表格，若不一致，提示取消成功即可
					if (res.data.length && res.data[0].bill_id == this.bill_id) {
						this.todoList = res.data;
					} else {
						uni.showToast({
							title: '取消成功'
						});
					}
					util.playSuccess();
				})
				.catch(err => {
					util.playFailed();
				});
		},
		onClosePickUp() {
			//
			uni.showModal({
				title: '系统提示',
				content: '是否确认下架完成？',
				success: res => {
					if (res.confirm) {
						const arr = this.todoList.filter(x => x.over_qty > 0);
						if (arr && arr.length) {
							//6.2.	若下方表格中over_qty存在大于0的数据，需弹出暂存仓选择窗口
							this.chooseCloseStoreModal.visible = true;
							api.wh_list().then(res => {
								this.chooseCloseStoreModal.storeList = res.data;
								this.chooseCloseStoreModal.storeId = '';
							});
						} else {
							this._closePickup();
						}
					}
				}
			});
		},
		_closePickup(overWh) {
			api.mopickup({
				opType: 'CLOSED',
				billId: this.wolist,
				issueWh: '',
				overWh: overWh || '',
				scanInfo: ''
			}).then(res => {
				// 刷新页面
				this.wolist = '';
				this.storeIndex = -1;
				this.todoList = [];
				this.bill_id = '';
				this.part = '';
			});
		},
		onChooseStoreModalOk() {
			//选择存储
			if (this.chooseCloseStoreModal.storeId) {
				// console.log(this.chooseCloseStoreModal.storeId)
				const storeId = this.chooseCloseStoreModal.storeId;
				this.chooseCloseStoreModal.visible = false;
				this.chooseCloseStoreModal.storeId = '';
				// 下架完成
				this._closePickup(storeId);
				// this._pickup('CLOSED',storeId).then(res=>{
				// 	//清除
				// 	this.bill_id = ''
				// 	this.$refs.refBill.confirmBill('', true);
				// 	this.todoList = []
				// })
			}
		},
		onUsePick() {
			// 消耗暂存
			//todo
			uni.showModal({
				title: '系统提示',
				content: '是否确认消耗暂存仓？',
				success: res => {
					if (res.confirm) {
						this.chooseUseStoreModal.visible = true;
						api.wh_list().then(res => {
							this.chooseUseStoreModal.storeList = res.data;
							this.chooseUseStoreModal.storeId = '';
							console.log(this.chooseUseStoreModal);
						});
						// Promise.all()
					}
				}
			});
		},
		onChooseUseStoreModalOk() {
			if (this.chooseUseStoreModal.storeId) {
				// console.log(this.chooseUseStoreModal.storeId)
				const storeId = this.chooseUseStoreModal.storeId;
				this.chooseUseStoreModal.visible = false;
				this.chooseUseStoreModal.storeId = '';
				return api
					.mopickup({
						opType: 'USETEMP',
						//发料单号 wolist 还是 bill_id
						billId: this.bill_id, //this.wolist,
						issueWh: '',
						overWh: storeId,
						scanInfo: ''
					})
					.then(res => {
						// 刷新页面
						this.wolist = '';
						this.storeIndex = -1;
						this.todoList = [];
						this.bill_id = '';
						this.part = '';
					})
					.catch(err => {});
			}
		}
	},
	beforeMount() {
		api.wh_list().then(res => {
			this.storeChooseList = res.data.map(x => {
				x.text = `${x.wh_name}(${x.wh_id})`;
				return x;
			});
			console.log(this.storeChooseList);
		});
	}
};
</script>

<style>
.fixed {
	position: fixed;
}
</style>
